<template>
  <div id="personalData">
    <el-tabs type="card">
      <el-tab-pane label="基本资料">
        <div class="bqydiv">
          <el-row style="margin-top: 20px">
            <el-col :span="10" :offset="1">
              <span style="font-size: 14px;color: #9CA3AF">个人信息</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">当前头像:</span>
            </el-col>
            <el-col :span="16">
              <el-image style="width: 100px;height: 100px;border: 3px solid #e6e6e6;"
                        :src="user.usersTopImg"></el-image>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">用户名:</span>
            </el-col>
            <el-col :span="9">
              <input class="grzxinput" v-model="user.uname" readonly style="width: 180px;height: 25px"></input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">用户账号:</span>
            </el-col>
            <el-col :span="9">
              <input class="grzxinput" v-model="user.account" readonly style="width: 300px;height: 25px"></input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">手机号码:</span>
            </el-col>
            <el-col :span="9">
              <input class="grzxinput" v-model="user.phone" readonly style="width: 300px;height: 25px"></input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">邮箱地址:</span>
            </el-col>
            <el-col :span="9">
              <input class="grzxinput" v-model="user.mailAddress" readonly style="width: 300px;height: 25px"></input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="3" :offset="1">
              <span style="font-size: 16px;color: #9CA3AF">账户余额:</span>
            </el-col>
            <el-col :span="9">
              <input class="grzxinput" v-model="user.balance" readonly style="width: 60px;height: 25px"></input>
              <span style="font-size: 16px;color: #9CA3AF">￥</span>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
    export default {
      name: "personalData",
      data(){
        return {
          user:{}
        }
      },
      methods:{
        getuserData() {
          this.$axios.get("queryUserById.action/" + sessionStorage.getItem('id'))
            .then(res => {
              res.data.usersTopImg=this.$store.state.path + res.data.usersTopImg;
              this.user = res.data;
            })
            .catch(err => {
              alert(err)
            })
        }
      },
      created() {
        this.getuserData();
      }
    }
</script>

<style scoped>
.grzxinput{
  color: #9CA3AF;
  border: 2px solid #e6e6e6;
}
</style>
